<!--#include virtual="/include/header.html"-->

<!-- 内容部分 s-->
<div id="bd" class="layout-col">
	<div class="classify">
		<ul>
			<li>
				<strong>按类型</strong>
				<a href="javascript:void(0)">全部（234）</a>
				<a href="javascript:void(0)">景点（43）</a>
				<a href="javascript:void(0)" class="cur">餐饮（345）</a>
				<a href="javascript:void(0)">住宿（5）</a>
				<a href="javascript:void(0)">娱乐（64）</a>
				<a href="javascript:void(0)">交通（6）</a>
				<a href="javascript:void(0)">其他（6）</a>
			</li>
			<li>
				<strong>按目的地</strong>
				<a href="javascript:void(0)" class="cur">全部（234）</a>
				<a href="javascript:void(0)">境外（5）</a>
				<a href="javascript:void(0)">国内（3）</a>
			</li>
		</ul>
	</div>
	<div id="waterfall">
		<div class="wfc-col"></div>
		<div class="wfc-col"></div>
		<div class="wfc-col"></div>
		<div class="wfc-col">
			<div class="wfc-user-info">
				<h2>卖姑娘的小火柴</h2>
				<p class="user-address">上海 浦东新区</p>
				<div class="links">
					<a href="javascript:void(0)">6个粉丝,</a>
					<a href="javascript:void(0)">关注13人</a>
				</div>
				<a href="javascript:void(0)" class="img-link"><img src="/static/img/data/b_img.png" alt="" /></a>
				<div class="info">
					<p class="describe">作为电影演员，赫本的时尚观点在其电影作品中得到极大体现，她最令人难忘的电影造型往往贴有“赫本风格”的时尚标签。</p>
				</div>
				<div class="lump lump-relevance">
					<h3>关联的账号...</h3>
					<a href="javascript:void(0)" class="sina">新浪微博</a>
					<a href="javascript:void(0)" class="tx">腾讯微博</a>
				</div>
				<div class="lump lump-img">
					<h3>最近动态...</h3>
					<div class="img-txt">
						<div class="img"><a href="javascript:void(0)"><img src="/static/img/data/40x40.jpg" alt="" /></a></div>
						<div class="txt">
							<p>借你望调 喜欢由 你 采集的 美女</p>
						</div>
					</div>
					<div class="img-txt">
						<div class="img"><a href="javascript:void(0)"><img src="/static/img/data/40x40_1.jpg" alt="" /></a></div>
						<div class="txt">
							<p>借你望调 喜欢由 你 采集的 美女</p>
						</div>
					</div>
					<div class="img-txt">
						<div class="img"><a href="javascript:void(0)"><img src="/static/img/data/40x40_2.jpg" alt="" /></a></div>
						<div class="txt">
							<p>借你望调 喜欢由 你 采集的 美女</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="load-more-col"><span><img src="/static/img/loading.gif" alt="" />请稍等，正在加载 ...</span></div>
<!-- 内容部分 end-->
<script type="text/javascript" src="/static/script/config.js"></script>
<script type="text/javascript" src="/static/script/core/jquery.js"></script>
<script type="text/javascript" src="/static/script/widget/layer.js"></script>
<script>
	(function(){
		var waterfall = $('#waterfall');
		var infos = $('<div class="links"><a href="javascript:void(0)" class="like">喜欢</a><a href="javascript:void(0)" class="forward">转采</a><a href="javascript:void(0)" class="edit">编辑</a></div>');

		waterfall.on('mouseenter', '.wfc', function(){
			infos.clone().appendTo($(this).addClass('whover'));
		}).on('mouseleave', '.whover', function(){
			$(this).removeClass('whover').find('div.links').remove();
		}).on('click', '.like,.edit,.forward', function(){
			var o = $(this);
			o.attr('data', '{type:"ajax", url:"/static/ui/3.html"}').loadHTML();
		});

		var times = 1, t = null, fall = $('div.wfc-col', waterfall),
			tmpl = '<div class="wfc"><a href="javascript:void(0)" class="img-link"><img src="{img}" alt="" /></a><div class="info"><p class="describe">{desc}</p><a href="javascript:void(0)">{name}</a><p class="stats">有<b>{like}</b>人喜欢，<b>{forward}</b>人转采</p></div></div>';

		function loadContent(){
			$.getJSON('/api.php?type=3&times='+times++, function(data){
				var col = 4;
				$.each(data, function(i, o){
					if(times === 2){
						col = 3;
						if(i > 6){
							col = 4;
							i -= 6;
						}
					}
					$(tmpl.replace(/\{([a-z]+)\}/ig, function(a, b){
						return o[b] || a;
					})).appendTo(fall[i%col]);
				});
				col = t = null;
			});
		};
		/*
			这里要求服务器端返回的数据在第一次请求时(times==1),返回的数据个数为 6+4*N, 当times>1时返回的数据个数为4*N
			N	行数(一行四个,所以是4*N个)
			6	为第一屏前三列前两行的数据,因为第四列已经有一个个人信息占据两行的位置
		*/

		$(window).on('scroll', function(){
			var scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight),
				scrollTop    = $(this).scrollTop();

			if(t === null && (scrollTop + document.documentElement.clientHeight) > scrollHeight - 88){//当滚动条至什么位置时开始加载数据
				t = setTimeout(loadContent, 288);//延时以保证不重复激发同一函数,面且可以让用户看到Loading的字样
			}
		});

		loadContent();//初始化
	})();
</script>
<!--#include virtual="/include/footer.html"-->
